<!--
 * @Author: jyq
 * @Date: 2022-07-04 09:36:16
 * @LastEditTime: 2022-07-07 14:30:16
 * @LastEditors: jyq
 * @Description: 从分类页面点进来的商品列表
 * @FilePath: \dasantest2\day06\vue3-project\src\views\TypeView.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
<div class="type">
   <van-nav-bar  @click-left="toHome()" class="myNavBar" :title="title" left-arrow>
      <template #right>
      <van-icon class="myIcon" name="search" />
      </template>
      </van-nav-bar>
      <div class="myspace46" ></div>
        <van-card
        class="myCard"
        v-for="item in myCardData"
        :key="item.id"
        :tag="item.tag"
        :price="item.price"
        :desc="描述信息"
        @click="toShoppingPage(item)"
        :thumb="item.img"
        :origin-price="item.originprice"
        >
        <template #title>
            <div class="myCardTitle">
                 <van-tag  type="danger" size="mini"
             v-if="item.title[0]">
                {{item.title[0]}}
                </van-tag>{{item.title[1]}}</div>
        </template>
        <template #desc>
        <van-row class="myRowTop" style="text-align:center; color:#333;">
        <van-col span="8">{{item.desc[0]}}</van-col>
        <van-col span="8">{{item.desc[1]}}</van-col>
        <van-col span="8">{{item.desc[2]}}</van-col>
        </van-row>
        <van-row class="myRowBottom" style="text-align:center;color:#888; font-size:10px;">
        <van-col span="8">{{item.desc[3]}}</van-col>
        <van-col span="8">{{item.desc[4]}}</van-col>
        <van-col span="8">{{item.desc[5]}}</van-col>
        </van-row>
        </template>
     <template #bottom>
        <div>
          <van-tag plain type="primary" size="mini">{{item.bottom[0]}}</van-tag>
          <div class="myspace46" ></div>
          <div style="color:#888; font-size:10px;">
            {{item.bottom[1]}}条评论|{{item.bottom[3]}}好评
          </div>
        </div>
        </template>
        </van-card>
</div>
</template>
<script setup>
import {useRouter,useRoute} from 'vue-router';
const router = useRouter()
const route = useRoute()
const {title} = JSON.parse(sessionStorage.getItem('type'))
const toHome = ()=>{
    router.push('/')
    // history.go(-1)
}
const toShoppingPage = (item)=>{
    sessionStorage.setItem('shop',JSON.stringify({name:item.title[1],price:item.price,originprice:item.originprice}))
    router.push({name:"shop",params:{id:item.id,name:item.title}})
    // history.go(-1)
}
const myCardData= [
    {
    id:1,
    title:['','米家互联网洗烘一体机Pro 10kg 智能洗衣机'],
    tag:'必买宝',
    price:'2799',
    originprice:'3299',
    img:'https://img.youpin.mi-img.com/shopmain/8ab6ae182b3c5394ac803188390df148.png@base@tag=imgScale&h=394&m=1&q=80&w=394',
    desc:['8kg','洗烘-一体机','上排水',"洗涤容量","产品分类","排水方式"],
    bottom:['30天价保','6214','95%']
    },
     {
    id:2,
    title:['小米自营','米家互联网洗烘一体机Pro 10kg 智能洗衣机'],
    tag:'标签',
    price:'2099',
    originprice:'2599',
    img:'https://img.youpin.mi-img.com/shopmain/a57241dc6a82565c92f1dc78bbc3a792.png@base@tag=imgScale&h=394&m=1&q=80&w=394',
    desc:['8kg','洗烘-一体机','上排水',"洗涤容量","产品分类","排水方式"],
    bottom:['30天价保','6214','95%']
    },
]
</script>

<style lang="less" scoped>
// :deep(.van-card__title){
//    font-size: 14px;
// }
.myIcon{
    font-size: 24px;
    color: #333333;
  }
  .myNavBar{
    --van-nav-bar-arrow-size:20px;
  }
.myspace46{
    width: 100%;
    height: 10px;
}
.myCard{
    background-color: #fff;
    text-align: left;
    --van-card-font-size:14px;
    --van-card-price-color:rgb(248,36,0);
    --van-tag-large-padding:1px 2px;
    --van-tag-line-height:13px;
    --van-tag-danger-color:rgb(255,162,79);
    --van-card-thumb-size:126px;
    .myCardTitle{
        line-height: 19px;
        font-size: 14px;
    }
    .myRowTop{

    }
    .myRowBottom{
        margin-bottom:8px;
    }
}
</style>
<style lang="less">
:root{
    --van-nav-bar-icon-color:#333333;
}
</style>